<template>
  <el-dialog
    :title="formData.id?'编辑客户':'添加客户'"
    :visible="showDialog"
    width="60%"
    @close="closeFn"
  >
    <el-form ref="formData" :model="formData" :rules="rules">
      <el-form-item label="经纪" prop="agent">
        <el-select v-model="formData.agent" placeholder="请选择">
          <el-option
            v-for="item in agentList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
            @blur="fn"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="name" label="姓名">
        <el-input v-model="formData.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item prop="email" label="邮箱">
        <el-input v-model="formData.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item prop="phone" label="电话">
        <el-input v-model="formData.phone" placeholder="请输入电话" />
      </el-form-item>
      <el-form-item prop="wechat" label="微信">
        <el-input v-model="formData.wechat" placeholder="请输入微信" />
      </el-form-item>
      <el-form-item prop="desc" label="描述">
        <el-input v-model="formData.desc" placeholder="请输入你的描述" />
      </el-form-item>
      <el-form-item prop="image" label="封面">
        <uploadImage ref="image" v-model="formData.image" @change.native="fnn" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeFn">取 消</el-button>
      <el-button type="primary" @click="addClients">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// editPersonalClients
import { getAgent } from '@/api/agent'
import { addClients, editPersonalClients } from '@/api/customer'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const checkEmail = (rule, val, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!mailReg.test(val)) {
        callback(new Error('请输入正确的邮箱格式'))
      } else {
        callback()
      }
    }
    return {
      agentList: [],
      formData: {
        agent: '',
        desc: '',
        email: '2@a.daw',
        image: '',
        name: '',
        phone: '',
        wechat: ''
      },
      rules: {
        agent: [{ required: true, message: '该项不能为空', trigger: 'change' }],
        desc: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        email: [{ required: true, message: '该项不能为空', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' }],
        image: [{ required: true, message: '该项不能为空', trigger: 'change' }],
        name: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        phone: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        wechat: [{ required: true, message: '该项不能为空', trigger: 'blur' }]
      }
    }
  },
  async created() {
    const res = await getAgent()
    this.agentList = res.data
  },
  methods: {
    closeFn() {
      this.formData = {}
      this.$refs.formData.resetFields()
      this.$refs.image.fileList = []
      this.$emit('update:showDialog', false)
    },
    fn() {
      // agent
      setTimeout(() => {
        // 值选中时就校验完成了 , 所以加个延时器
        this.$refs.formData.validateField('agent')
      }, 100)
    },
    async addClients() {
      // 获取图片
      this.formData.image = this.$refs.image.fileList[0] && this.$refs.image.fileList[0].url
      // console.log(this.image)
      // 校验
      await this.$refs.formData.validate()
      if (this.formData.id) {
        // 编辑
        await editPersonalClients(this.formData)
        // 提示
        this.$message.success('编辑成功')
      } else {
        // 请求
        await addClients(this.formData)
        // 提示
        this.$message.success('添加成功')
      }

      // 关闭框
      // 更新父组件
      this.$emit('dialogData', this.formData.name, this.formData.agent)
    },
    fnn() {
      console.log(1)
      setTimeout(() => {
        // 值选中时就校验完成了 , 所以加个延时器
        this.$refs.formData.clearValidate('image')
      }, 100)
    }
  }
}
</script>

<style>

</style>
